<template>
	<view class="">
		<view class="card" v-for="(item,index) in order" :key="index">
			<view class="title x-bc" :showBtn="showBtn" v-if="showBtn">
				<view class="name">订单编号：{{item.orderid}}</view>
				<view class="type">{{item.status}}</view>
			</view>
			<view class="detail pr"  @click="jumpDetail">
				<image :src="item.img"></image>
				<view class="text">
					<view class="name">{{item.title}}</view>
					<view class="specifications x-bc">
						<view class="parameter">{{item.specifications}}</view>
						<view class="num">*{{item.num}}</view>
					</view>
				</view>
				<view class="pay pa" :isCoupons="isCoupons" v-if="!isCoupons">应付:{{item.score}}积分</view>
				<view class="pay1 pa d-ja" :isCoupons="isCoupons" v-if="isCoupons">
					<view class="total">总价5580，</view>
					<view class="coupons">优惠券抵扣：-500积分</view>
				</view>
			</view>
			<view class="sumbit" :showBtn="showBtn" v-if="showBtn">
				<view class="order_detail x-c" v-if="item.btn_detail == '订单详情'">{{item.btn_detail}}</view>
				<view class="cancel x-c" v-if="item.btn_cancel == '取消订单'">{{item.btn_cancel}}</view>
				<view class="pay_btn x-c"  v-if="item.btn_red">{{item.btn_red}}</view>
			</view>
		</view>
	</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				detail: '/pages/user/order/detail/index'
			};
		},
		props: {
			order: {
				type: Array,
				default: []
			},
			showBtn: { // 隐藏订单信息
				type: Boolean,
				default: false
			},
			pay: { // 应付 实付
				type: String,
				default: '应付'
			},
			isCoupons: { // 使用优惠券
				type: Boolean,
				default: true
			},
		},
		methods: {
            jumpDetail() {
				uni.navigateTo({
					url: this.detail
				})
			}
        }

	};
</script>

<style scoped lang="scss">
	.card {
		margin-top: 16rpx;
		padding: 16rpx 24rpx;
		background-color: #fff;
		border-radius: 16rpx;

		.title {
			border-bottom: 1rpx dashed #dcdcdc;
			padding-bottom: 12rpx;
			font-size: 26rpx;

			.name {
				color: #333;
			}

			.type {
				color: #ff2d1b;
			}
		}

		.detail {
			padding: 28rpx 0 26rpx 0;
			display: flex;
			border-bottom: 1rpx dashed #dcdcdc;
			image {
				width: 230rpx;
				height: 188rpx;
				border-radius: 12rpx;
			}

			.text {
				padding: 15rpx 0 0 10rpx;
				width: 440rpx;

				.name {
					width: 392rpx;
					font-size: 28rpx;
					color: #333;
				}

				.specifications {
					padding: 14rpx 0 0 0;

					.parameter {
						width: 164rpx;
						font-size: 24rpx;
						color: #999;
					}

					.num {
						margin-left: 100rpx;
						font-size: 24rpx;
						color: #999;
					}
				}

			}
			.pay {
				color: #333;
				right: 0;
				top: 180rpx;
			}
			.pay1 {
				color: #333;
				right: 0;
				top: 180rpx;
				font-size: 27.5rpx;
				letter-spacing: 1.5rpx;
				.total {
					color: #999;
				}
				.coupons {
					color: #FF2D1B;
				}
			}
			
		}

		// 按钮
		.sumbit {
			display: flex;
			justify-content: flex-end;
			padding: 20rpx 0 5rpx 0;

			.order_detail {
				width: 156rpx;
				height: 56rpx;
				border: 2rpx solid #d9d9d9;
				border-radius: 30rpx;
				color: #333;
			}

			.cancel {
				width: 156rpx;
				height: 56rpx;
				border: 2rpx solid #d9d9d9;
				border-radius: 30rpx;
				color: #333;
				margin-left: 16rpx;
			}

			.pay_btn {
				margin-left: 16rpx;
				width: 156rpx;
				height: 56rpx;
				border: 2rpx solid #e93323;
				border-radius: 30rpx;
				color: #e93323;
			}
		}
	}
</style>
